<template>
  <div class="container">
    <div class="data">
      <a-card bordered v-for="item in data" title="数据" :bordered="false" style="width: 32%; margin-bottom: 20px;">
        <template #extra><a-tag :color="item.color">{{ item.title }}</a-tag></template>
        <div style="display: flex;justify-content: space-between;">
          <div style="width: 50%;">
            <p class="text">{{ item.value > 10000 ? `${item.value / 10000}万` : item.value }}</p>
            <p class="text">{{ item.unit }}</p>
          </div>
          <div style="width: 50%;text-align: end;">
            <p class="text">
              <component :is="$antIcons[item.icon]" :style="`color:${item.color};font-size:32px`" />
            </p>
            <p class="text">{{ item.date }}</p>
          </div>
        </div>
      </a-card>
    </div>
    <div class="file">
      <a-card bordered v-for="item in application" title="应用" :bordered="false" style="width: 32%; margin-bottom: 20px;">
        <template #extra><a-tag :color="item.color">{{ item.title }}</a-tag></template>
        <div style="display: flex;justify-content: space-between;">
          <div style="width: 50%;">
            <p class="text">{{ item.value }}</p>
            <p class="text">{{ item.unit }}</p>
          </div>
          <div style="width: 50%;text-align: end;">
            <p class="text">
              <component :is="$antIcons[item.icon]" :style="`color:${item.color};font-size:32px`" />
            </p>
            <p class="text">{{ item.date }}</p>
          </div>
        </div>
      </a-card>
    </div>
    <div class="PageView">
      <a-card bordered title="数据访问量" :bordered="false" style="width: 100%; margin-bottom: 20px;">
        <div id="data_access" style="width: 100%;height: 25vh;"></div>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>
<script setup>
import { onMounted, ref, nextTick } from "vue";
import { dataList, applicationList, countList } from '@api/home.js'
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import * as echarts from 'echarts';
const router = useRouter()

const data = ref([])
const application = ref([])
let count = ref()

function getData() {
  dataList().then(res => {
    data.value = res.data
  }).catch(err => {
    message.error('数据获取失败')
  })
}
function getApplication() {
  applicationList().then(res => {
    application.value = res.data
  }).catch(err => {
    message.error('数据获取失败')
  })
}
function getEchartsData() {
  countList().then(res => {
    count.value = res.data
    console.log(count.value)
    initEcharts(count.value)
  }).catch(err => {
    message.error('数据获取失败')
  })
}
function initEcharts(count) {
  var myChart = echarts.init(document.getElementById('data_access'));
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {},
    grid: { left: '1%', right: '1%', top: '3%', bottom: 0, containLabel: true },
    series: [
      {
        name: '访问量',
        type: 'bar',
        data: count,
        barWidth: '35%',
        itemStyle: {
          normal: {
            color: 'rgb(55, 162, 218)'
          }
        }
      },
    ]
  });
  window.onresize = function () {//自适应大小
    myChart.resize();
  }
}

onMounted(() => {
  getData()
  getApplication()
  getEchartsData()
})
</script>

<style lang="less" scoped>
.data,
.file {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container {
  height: calc(100vh - 65px);
  padding: 20px;
}

.text {
  font-size: 18px;
  font-weight: 500;
  color: rgba(0, 0, 0, .7);
}
</style>